iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 11
6
Modern Web

透過 ESLint 練習 JavaScript ES6系列 第 11

Day11【ES6 小筆記】陣列的解構賦值-以哥哥的前女友為例(Array Destructuring)

  • 分享至 

  • xImage
  •  

Day11【ES6 小筆記】陣列的解構賦值-基礎使用範例(Array Destructuring)
上一篇介紹了物件的解構賦值應用,而解構賦值的功能是要讓我們在寫物件、陣列的時候可以很便利的使用縮寫,將資料取出成獨立變數,增加可讀性並減少程式碼,今天就來練習陣列的解構賦值應用吧!


陣列解構特性

陣列的解構賦值是使用順序的索引值對應,就像是鏡子一樣,將右方的資料往左邊對應,然後會一個位置對一個值 (但沒有像鏡子左右顛倒),如圖:
陣列的解構賦值
像這個樣子 我們就可以一次宣告好全部的變數,得到 a=1,b=2,c=3,d=4,e=5,以下來看看範例囉~


基礎範例

假如我們有一個陣列,紀錄我哥前女友的名稱:

let exGirl = ['蘋蘋','欣欣','雯雯','綺綺'];

如果我們要把每個前女友的名稱抓出來存在變數,一般會需要透過陣列的索引值,才能取得我們要的值並賦予變數,像這樣:

let one = exGirl[0];
let two = exGirl[1];
let three = exGirl[2];
let fore = exGirl[3];

而在陣列解構賦值就可以這樣寫:

let [one, two, three, fore] = exGirl;

以上得出的結果就一樣都會是 one='蘋蘋' tow='欣欣' three='雯雯' fore='綺綺',變得相當方便!

而如果遇到空的變數,這些值也會跳過(因為是對應索引位置)。

let exGirl = ['蘋蘋','欣欣','雯雯','綺綺'];
let [one, , three, fore] = exGirl;
// one='蘋蘋'
// three='雯雯'
// fore='綺綺'

剩餘參數&陣列解構的運用

如果想知道哥哥第二任以後的女朋友有哪些,可以搭配之前介紹過的剩餘參數這樣寫:

let exGirl = ['蘋蘋','欣欣','雯雯','綺綺'];
let [one, two , ...other] = exGirl;
console.log(other) // other = ['雯雯','綺綺']

預設值

假如感覺哥哥快跟現在的女友月月分手了,也可以先設定預設值

let exGirl = ['蘋蘋','欣欣','雯雯','綺綺'];
let [one, two , three , fore , five ="月月"] = exGirl;
console.log(five) // five = 月月

變數交換

在陣列解構中做互換變數非常的方便,假如我後來才發現哥哥的第一任跟第二任順序反了,就可以這樣寫:

var one = '蘋蘋';
var two = '欣欣';

[one, two] = [two, one];
console.log(one); // one = 欣欣
console.log(two); // two = 蘋蘋

字串拆解

如果陣列解構遇到字串,則會將字串拆解成一個一個字元,賦予到左方的變數上。

let please = '格幫我買飲料';
[a, b, c, d, e,f] = please;
// a=格 b=幫 c=我 d=買 e=飲 f=料

以上~希望哥哥有幫助大家了解陣列解構賦值的用法囉!


參考文章
MDN
CodecastsJS

ESLint airbnb 撰寫規則
5.2 使用陣列解構子


上一篇
Day10【ES6 小筆記】物件的解構賦值-以一間好吃的餐廳為例(Object Destructuring)
下一篇
Day12【ES6 小筆記】for 迴圈 vs. for...of - 陣列處理比一比
系列文
透過 ESLint 練習 JavaScript ES630
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
1
Chita
iT邦新手 5 級 ‧ 2019-09-12 16:22:19

哇!哥哥根本人生勝利組 (大誤

我無法同意你更多了

江江好 iT邦新手 5 級 ‧ 2019-09-13 23:36:48 檢舉

我也覺得哥哥很厲害XDDD

0
阿儒
iT邦新手 4 級 ‧ 2019-09-12 16:35:50

哥哥很多前女友欸

江江好 iT邦新手 5 級 ‧ 2019-09-13 23:37:19 檢舉

我已經省略很多個了XDDD(?!?!

0
紅茶小公主
iT邦新手 1 級 ‧ 2019-09-12 17:16:47

這個舉例太好懂惹吧!!!收藏起乃~

江江好 iT邦新手 5 級 ‧ 2019-09-13 23:37:35 檢舉

謝拉XDD /images/emoticon/emoticon37.gif

0
Askie Lin
iT邦新手 5 級 ‧ 2019-09-18 16:29:40

羨慕一波,哥哥一定很帥...
好清楚,讚讚!

江江好 iT邦新手 5 級 ‧ 2019-09-18 18:34:07 檢舉

謝謝妳~~我只能說哥哥長得跟我很像就是了XDDD/images/emoticon/emoticon37.gif

0
javascript
iT邦新手 2 級 ‧ 2019-09-18 16:51:52

別人都在羨慕妳哥哥有這麼多前女友

我怎麼比較羨慕你哥哥有妳這麼一位妹妹呢...

江江好 iT邦新手 5 級 ‧ 2019-09-18 18:35:21 檢舉

哎呦 很會抓重點ㄛ!有這麼可愛的妹妹真ㄉ值得羨慕!/images/emoticon/emoticon37.gif

0

醒醒吧,你沒有...哥哥..?!

江江好 iT邦新手 5 級 ‧ 2019-10-21 22:05:39 檢舉

XDDD 我有!!!本篇是真實故事

0
阿展展展
iT邦好手 1 級 ‧ 2019-10-13 10:12:39

哥哥正夯!/images/emoticon/emoticon15.gif

江江好 iT邦新手 5 級 ‧ 2019-10-21 22:06:04 檢舉

最喜歡我哥哥ㄌ ^__^

我要留言

立即登入留言